<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-鼠标事件</title>
    <style>
        #box{
            border: 1px red solid;
            width: 200px;
            height: 200px;
            margin: auto;
        }
    </style>
    <script>
        window.onload=function () {
            // 鼠标移入
            let divEle = document.getElementById("box");
            divEle.onmouseenter=function (){
                divEle.style.backgroundColor="red";
            }
            // 鼠标移出
            divEle.onmouseleave=function (){
                divEle.style.backgroundColor="#fff";
            }
            // 鼠标移动
            divEle.onmousemove=function (){
                console.log("鼠标移动中")
            }
            // 鼠标按下和松开
            divEle.onmousedown=function () {
                divEle.style.backgroundColor="pink";
            }
            divEle.onmouseup=function () {
                divEle.style.backgroundColor="blue";
            }
        }
    </script>
</head>
<body>
<div id="box">div1</div>
</body>
</html>